<!DOCTYPE html>
<html>
<head>
  <title>九九乘法表</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    h1 {
      color: #333;
    }
    .multiplication-table {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .row {
      display: flex;
      justify-content: center;
      margin-bottom: 5px;
    }
    .cell {
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #333;
      margin: 0 2px;
    }
    .header-cell {
      background-color: #333;
      color: white;
    }
  </style>
</head>
<body>
  <div class="multiplication-table">
    <!-- 使用 JavaScript 动态生成梯形形状的九九乘法表 -->
  </div>
  <h1>存钱案例</h1>
  <p>账户余额：<span id="balance">0</span> 元</p>
  <label for="depositAmount">存款金额：</label>
  <input type="number" id="depositAmount">
  <button onclick="depositMoney()">存款</button>
  <br>
  <label for="withdrawAmount">取款金额：</label>
  <input type="number" id="withdrawAmount">
  <button onclick="withdrawMoney()">取款</button>
  <script>
    // JavaScript 代码
    const multiplicationTable = document.querySelector('.multiplication-table');
    for (let i = 1; i <= 9; i++) {
      let row = document.createElement('div');
      row.classList.add('row');
      for (let j = 1; j <= i; j++) {
        let cell = document.createElement('div');
        cell.classList.add('cell');
        if (j === 1) {
          cell.classList.add('header-cell');
        }
        cell.textContent = `${j} x ${i} = ${i * j}`;
        row.appendChild(cell);
      }
      multiplicationTable.appendChild(row);
    }
    let accountBalance = 0;
    const balanceElement = document.getElementById('balance');

    function depositMoney() {
      const depositAmount = parseFloat(document.getElementById('depositAmount').value);
      if (!isNaN(depositAmount) && depositAmount > 0) {
        accountBalance += depositAmount;
        balanceElement.textContent = accountBalance;
      } else {
        alert("存款金额必须是一个大于0的数字。");
      }
    }

    function withdrawMoney() {
      const withdrawAmount = parseFloat(document.getElementById('withdrawAmount').value);
      if (!isNaN(withdrawAmount) && withdrawAmount > 0) {
        if (withdrawAmount <= accountBalance) {
          accountBalance -= withdrawAmount;
          balanceElement.textContent = accountBalance;
        } else {
          alert("余额不足。");
        }
      } else {
        alert("取款金额必须是一个大于0的数字。");
      }
    }
  </script>
</body>
</html>
